<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>找回密码</title>
    <link rel="stylesheet" href="layui/css/layui.css">
</head>
<style>
    html, body {width: 100%;height: 100%;overflow: hidden}
    body {background:url(img/bg.jpg)}
    body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
    .layui-container {width: 100%;height: 100%;overflow: hidden}
    .admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:30%;margin-left:-180px;margin-top:-100px;}
    .logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
    .logo-title h1 {color:#66afe9;font-size:25px;font-weight:bold;}
    .login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
    .login-form .layui-form-item {position:relative;}
    .login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
    .login-form .layui-form-item input {padding-left:36px;}
    .captcha {width:60%;display:inline-block;}
    .captcha-img {display:inline-block;float:right;}
    .captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;}
</style>
<body>

<div class="layui-container">
    <div class="admin-login-background">
        <div class="layui-form login-form">

            <form class="layui-form" action="" method="post" id="adminFrm">
                <div class="layui-form-item logo-title">
                    <h1 style="color: cornflowerblue;font-family: 楷体">找回密码</h1>
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-email"></label>
                    <input type="text" name="email" lay-verify="required|email" placeholder="QQ邮箱" id="email" autocomplete="off" class="layui-input">
                </div>

                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode"></label>
                    <input type="text" name="chartCode" lay-verify="required" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha">
                    <div class="captcha-img">
                        <a href="javascript:;" title="换一张"><img id="captchaPic" src="/codeApi/captcha" mytarget="nextCode" width="110px"></a>
                    </div>

                </div>

                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-vercode"></label>
                    <input type="text" name="emailCode" lay-verify="required" placeholder="邮箱验证码" autocomplete="off" class="layui-input verification captcha">
                    <div class="captcha-img">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-radius" style="width: 110px" id="getCode">获取验证码</button>
                    </div>

                </div>

                <div class="layui-form-item">
                    <button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" id="loginBtn" lay-submit="" lay-filter="login">找回密码</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="layui/layui.js" charset="utf-8"></script>
<script src="js/jquery-3.3.1.js" charset="utf-8"></script>
<script src="js/jquery.cookie.js" charset="utf-8"></script>
<script src="js/shield-btn.js" charset="utf-8"></script>
<script>
    $(function () {
        /*防刷新：检测是否存在cookie*/
        a("email_code");

        $("[mytarget='nextCode']").click(function () {
            //浏览器带有缓存功能,不会多次请求相同数据
            $("#captchaPic").attr("src", "/codeApi/captcha?date=" + new Date());
            return false;
        })

        $('#getCode').click(function () {

            var email=$('#email').val();
            var emailRegex=new RegExp("[1-9]\\d{7,10}@qq\\.com");

            if (email!=''&&email.length>0){

                if(!email.match(emailRegex)) {
                    layer.msg('QQ邮箱格式不正确', {icon: 2,anim: 6});
                }else{
                    //加载层
                    layer.load(2);

                    //请求服务端发送邮箱验证码
                    $.post('/accountApi/getEmailCode/forget',{"email":email},function (res) {
                        if (res.data=='SUCCESS'){
                            //关闭加载层
                            layer.closeAll('loading');
                            b("email_code");
                            layer.msg('验证码已发送至你的QQ邮箱，请注意查收',{icon: 1})
                        }else if (res.data=='NO_EXIST'){
                            //关闭加载层
                            layer.closeAll('loading');
                            layer.msg('该邮箱未被注册',{icon: 2})
                        }else if (res.data=='ERROR'){
                            //关闭加载层
                            layer.closeAll('loading');
                            layer.msg('服务器异常，稍后重试',{icon: 2})
                        }

                    })

                }
            }else{
                layer.msg('请输入QQ邮箱地址', {icon: 5,anim: 6});
            }

        })
    })

    layui.use(['form','layer','table','jquery'], function(){
        var form = layui.form,
            layer= layui.layer,
            $=layui.jquery;

        //自定义验证规则
        form.verify({
            email: [/^[1-9]\d{7,10}@qq\.com$/, '请输入正确的邮箱']
        });

        //监听提交
        form.on('submit(login)', function(data){
            var adminInfo=$('#adminFrm').serialize();
            $('#loginBtn').text('加载中...');
            $.post('/accountApi/forget',adminInfo,function (res) {

                if(res.data=='SUCCESS'){
                    //登入成功的提示与跳转
                    layer.msg('验证成功，正在跳转', {
                        offset: '15px'
                        ,icon: 1
                        ,time: 1000
                    }, function(){
                        location.href = 'reset.html';
                    });
                }else if (res.data=='CHART_CODE_ERROR'){
                    layer.msg('图形验证码错了',{icon: 2})

                }else if(res.data=='TIMEOUT'){
                    layer.msg('邮箱验证码过期，请重新获取', {icon: 5,anim: 6});

                }else if(res.data=='EMAIL_CODE_ERROR'){
                    layer.msg('邮箱验证码错了', {icon: 5,anim: 6});

                }

                $('#loginBtn').text('找回密码');
            })

            return false;
        });
    });
</script>
</body>
</html>